<template>
  <AppLayout>
    <view class="module">
      <view class="option">
        <text>头像</text>
        <image src="/static/user/avatar.png"/>
      </view>
      <view class="option">
        <text>昵称</text>
        <text class="value">Wall-E</text>
      </view>
      <view class="option">
        <text>手机号</text>
        <text class="value">18800000000</text>
      </view>
    </view>
    <view class="module">
      <navigator class="option" url="/pages/user/address/list">
        <text>收货地址管理</text>
      </navigator>
    </view>
    <button class="logout" @tap="outLogin">退出登录</button>
  </AppLayout>
</template>

<script>
  import AppLayout from '@/layouts/AppLayout'
  export default {
    components: { AppLayout },
    methods: {
      toPage(url) {
        uni.navigateTo({
          url
        })
      },
      outLogin() {
        uni.showModal({
          title: '提示',
          content: '确定退出当前账号吗？',
          success(res) {
            if (res.confirm) {
              console.log('确定退出')
            }
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../../style/variables";
  .module {
    padding-left: 0;
    background: $background-color-module;
    margin-bottom: $gap;

    .option {
      border-bottom: 1px solid #eee;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 50px;
      padding: 0 16px;
      box-sizing: border-box;

      image {
        height: 40px;
        width: 40px;
      }

      .value {
        color: #555;
      }

      &:last-of-type {
        border-bottom: 1px solid transparent;
      }
    }
  }

  // 退出登录
  .logout {
    position: fixed;
    bottom: 40rpx;
    left: 10%;
    width: 80%;
    margin: 0 auto;
    border: 1px solid $primary-color;
    color: $primary-color;
    background: transparent;
    border-radius: 50rpx;
  }
</style>
